<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	.loading{
		padding:100px;	
	}
	.loading .loading-box {
		position: relative;
		margin: 0 auto;
		width: 80px;
		height: 80px;
	}
	.loading .loading-box .rond {
		position: absolute;
		top: 0;
		left: 0;
		width: 80px;
		height: 80px;
		border: 1px solid #333;
		border-radius: 50%;
		-webkit-animation: ani-rond 2s infinite;
		animation: ani-rond 2s infinite;
	}
	.loading .loading-box .dot {
		position: absolute;
		left: 15px;
		top: 0px;
		height: 10px;
		width: 10px;
		background-color: #333;
		border-radius: 50%;
	}
	.loading .loading-box .load {
		position: absolute;
		top: 15px;
		left: 12px;
		color: #333;
		font-family: calibri;
		text-align: center;
	}
	/* keyframes */
	@-webkit-keyframes ani-rond {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
	@keyframes ani-rond {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
  </style>
 </head>
 <body>
	<div class="loading">
		<div class="loading-box">
	      <div class="rond">
	        <div class="dot"></div>
	      </div>
	      <div class="load">
	        <p>loading...</p>
	      </div>
	 </div>
	</div>
	
 </body>
</html>
